import styled from "styled-components";

export const PercentLineWrap = styled.div<{
  w?: number;
  h?: number;
  backgroundColor?: string;
}>`
  position: relative;
  width: ${(p) => (p.w ? p.w + "px" : "100%")};
  height: ${(p) => (p.h ? p.h + "px" : "100%")};
  background-color: ${(p) => p.backgroundColor || "#899DBF"};
`;

export const ProgressLineStyle = styled.div<{ percent?: number }>`
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  width: ${(p) => (p.percent || 0) + "%"};
  background-color: #8cdcb8;
`;
